import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import type { HistoryTaskDataItemType } from '../group/typings'
import type { HistoryTaskModalPropsType } from './typings'
import { defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElDialog } from 'element-plus'
import ProSaasTable from '~/components/ProSaasTable'
import ColorfulBadge from '~/components/ColorfulBadge'
import useVuexGetters from '~/hooks/useVuexGetters'
import { MODAL_NORMAL_WIDTH } from '~/utils/const'

export default defineComponent({
  name: 'HistoryTaskModal',
  props: ['visible', 'detail', 'cancel'],
  setup(props: HistoryTaskModalPropsType) {
    const store = useStore()
    const loopSwitchGroupState = useVuexGetters('loopSwitchGroup', [
      'applyStateSelectList',
      'applyStateEnum'
    ])
    const switchLightStrategyState = useVuexGetters('switchLightStrategy', [
      'taskTypeSelectList',
      'taskTypeEnum'
    ])

    onMounted(() => {
      if (!switchLightStrategyState.taskTypeSelectList.value?.length)
        store.dispatch('switchLightStrategy/GetTaskTypeSelectList')
      if (!loopSwitchGroupState.applyStateSelectList.value?.length)
        store.dispatch('loopSwitchGroup/GetApplyStateSelectList')
    })

    const columns: TableColumnProps<HistoryTaskDataItemType>[] = [
      {
        label: '任务名称',
        prop: 'taskName',
        minWidth: 170
        // showOverflowTooltip: true
      },
      {
        label: '任务类型',
        prop: 'taskType',
        minWidth: 170,
        enumValues: switchLightStrategyState.taskTypeEnum
        // showOverflowTooltip: true
      },
      {
        label: '应用状态',
        prop: 'applyState',
        minWidth: 170,
        enumValues: loopSwitchGroupState.applyStateEnum,
        sortable: true,
        render: (option, value) => (
          <ColorfulBadge
            value={value}
            enumKey={option.row.applyState!}
            options={{ info: 2, warning: 1, success: 0 }}
          />
        )
        // showOverflowTooltip: true
      },
      {
        label: '应用时间',
        prop: 'applyBeginTime',
        minWidth: 220,
        sortable: true
        // showOverflowTooltip: true
      },
      {
        label: '结束时间',
        prop: 'applyEndTime',
        minWidth: 220
        // showOverflowTooltip: true
      },
      {
        label: '备注',
        prop: 'memo',
        minWidth: 220
        // showOverflowTooltip: true
      }
    ]

    return () => (
      <ElDialog
        width={MODAL_NORMAL_WIDTH}
        title="历史任务"
        modelValue={props?.visible}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props?.cancel}
      >
        <ProSaasTable<HistoryTaskDataItemType>
          columns={columns}
          rowKey="id"
          defaultSort={{ prop: 'applyBeginTime', order: 'descending' }}
          dispatchType="loopSwitchGroup/GetGroupLoopLogList"
          searchParams={{
            taskGroupLoopId: props?.detail?.id
          }}
        />
      </ElDialog>
    )
  }
})
